<template>
    <div>
        <el-dialog
            :title="!form.id ? '新增' : '修改'"
            :visible.sync="visible"
            :close-on-click-modal="false">

            <div class="table_form_wrap">
                <el-form ref="form" :model="form" :rules="rules" @keyup.enter.native="handleSubmit()" label-width="120px">
                    <el-form-item label="所属分类" prop="cateId">
                        <CategorySelect :categoryPath.sync="categoryPath"></CategorySelect>
                    </el-form-item>
                    <el-form-item label="属性名称" prop="attrName">
                        <el-input placeholder="" v-model="form.attrName" clearable style="width: 80%"></el-input>
                    </el-form-item>

                    <el-form-item label="属性图标" prop="icon">
                        <el-input placeholder="" v-model="form.icon" clearable style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="值类型" prop="valueType">
                        <el-switch
                            v-model="form.valueType"
                            active-text="允许多个值"
                            inactive-text="只能单个值"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :inactive-value="0"
                            :active-value="1">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="可选值" prop="valueSelect">
                        <el-select v-model="form.valueSelect" multiple filterable allow-create placeholder="请输入内容" style="width: 80%;"></el-select>
                    </el-form-item>

                    <el-form-item label="可检索" prop="searchType" v-if="type == 1">
                        <el-switch
                            v-model="form.searchType"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0"
                        ></el-switch>
                    </el-form-item>
                    <el-form-item label="快速展示" prop="showDesc" v-if="type == 1">
                        <el-switch
                            v-model="form.showDesc"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0"
                        ></el-switch>
                    </el-form-item>
                    <el-form-item label="启用状态" prop="enable">
                        <el-switch
                            v-model="form.enable"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0"
                        ></el-switch>
                    </el-form-item>
                </el-form>
            </div>


            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button @click="handleSubmit()" type="primary" :submitLoading="submitLoading">提 交</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
import CategorySelect from '@/views/mall/pmscategory/components/category-cascader'
export default {
    components: {
        CategorySelect
    },
    props: {
        type: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            visible: false,
            submitLoading: false,

            form: {
                cateId: null,
                attrName: null,
                searchType: null,
                valueType: null,
                icon: null,
                valueSelect: null,
                attrType: null,
                enable: null,
                showDesc: null
            },
            rules: {
                cateId: [
                    { required: true, message: '所属分类不能为空', trigger: 'blur' }
                ],
                attrName: [
                    { required: true, message: '属性名不能为空', trigger: 'blur' }
                ]
            },

            categoryPath: [],
        }
    },

    created() {
        this.form.attrType = this.type
    },

    watch: {
        categoryPath(path) {
            //监听到路径变化需要查出这个三级分类的分组信息
            this.form.cateId = path[path.length - 1];
        }
    },

    methods: {
        init(id) {
            const refs = this.$refs
            // 情况表单数据
            this.form.id = id || null
            this.categoryPath = []
            this.visible = true


            this.$nextTick(() => {
                refs['form'].resetFields()
                if(this.form.id) {
                    this.getInfo(this.form.id)
                }
            })
        },

        /**
         * 详细信息
         */
        async getInfo(id) {
            if (id) {
                const res = await this.$http({
                    url: '/mall/pmsattr/info/' + id,
                    method: 'GET'
                })
                this.form = Object.assign({}, res.data)

                this.categoryPath = this.form.categoryPath

                this.form.valueSelect = res.data.valueSelect.split(";");
            }
        },

        /**
         * 提交表单
         */
        async handleSubmit() {
            const refs = this.$refs
            this.submitLoading = true
            const valid = await refs['form'].validate().catch(() => {})
            if(valid) {

                // 设置分类ID
                if(this.categoryPath.length > 0) {
                    this.form.cateId = this.categoryPath[this.categoryPath.length-1]
                }
                this.form.valueSelect = this.form.valueSelect.join(";")

                const res = await this.$http({
                    url: `/mall/pmsattr/${!this.form.id ? 'save' : 'update'}`,
                    method: 'POST',
                    data: this.form
                })
                if (this.ResultMessage(res)) {
                    this.$emit('refreshDataList')
                    this.submitLoading = false
                    this.visible = false
                } else {
                    this.submitLoading = false
                }
            } else {
                this.submitLoading = false
            }
        }

    }
};
</script>

<style lang="scss" scoped></style>
